<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
    <script>
        //map : 字典
        //1.创建一个map
        // let map = new Map();
        // map.set("myname", "张三");
        // map.set({age:20}, "hello")
        // console.log(map);// {'myname' => '张三', {…} => 'hello'}

        //2.直接创建一个map结构
        // let map = new Map([["name","张三"],["age",20],["height","178cm"]]);
        // console.log(map);// {'name' => '张三', 'age' => 20, 'height' => '178cm'}

        //map里的方法:
        //1.长度 size
        // let map = new Map([["name","张三"],["age",20],["height","178cm"]]);
        // console.log(map.size); // 3

        // let obj = {
        //     name: "张三",
        //     age: 20
        // }
        // let count = 0;
        // for (let key in obj) {
        //     count++
        // }
        // console.log(count); // 2
        // console.log(obj.length); //undefined  对象没有length属性

        //2.set 方法
        // let map = new Map([["name","张三"],["age",20],["height","178cm"]]);
        // map.set("hello","world");
        // console.log(map);// {'name' => '张三', 'age' => 20, 'height' => '178cm', 'hello' => 'world'}

        //3.删除 delete \ clear
        // map.delete(键名);
        // let map=new Map([["name","张三"],["age",20],["height","178cm"]]);
        // map.delete("name");
        // console.log(map); // {'age' => 20, 'height' => '178cm'}
        // map.clear();
        // console.log(map);//{size: 0}

        //4.是否存在某个元素 has
        // let map = new Map([["name","张三"],["age",20],["height","178cm"]]);
        // var res = map.has("name"); 
        // console.log(res); // true

        //5.通过 键名获取键值 get :  set数据结构里没有这个方法
        // let map = new Map([["name","张三"],["age",20],["height","178cm"]]);
        // let res = map.get("age");
        // console.log(res); // 20

        //6.keys 和 values
        // let map =  new Map([["name","张三"],["age",20],["height","178cm"]]);
        // let keys = map.keys();
        // console.log(keys); //  {'name', 'age', 'height'}
        // let values = map.values();
        // console.log(values); // {'张三', 20, '178cm'}

        //把元素作为键名
        let lis = document.querySelectorAll("li");
        // let obj = {};
        // obj[lis[0]] = "red";
        // obj[lis[1]] = "blue";
        // obj[lis[2]] = "yellow";
        // console.log(obj);// {[object HTMLLIElement]: 'yellow'}  被覆盖

        let map = new Map();
        map.set(lis[0], "red");
        map.set(lis[1], "blue");
        map.set(lis[2], "yellow");
        console.log(map); //{li => 'red', li => 'blue', li => 'yellow'}
        map.forEach((item, key) => key.style.color = item)
    </script>
</body>

</html>